require("../less/Course.less");
require("../lib/iconfont/iconfont.css");
document.ready(function () {

    let userId = window.$utils.istongguo();
    window.$utils.getfoot("sport");
    window.$utils.getheader("Course");

    /* 收先测试一下接口 */

    /* 声明一个变量来接收最新课程方便渲染 */
    let newCourseNum = '';
    /* 声明一个变量来接收普通课程方便渲染 */
    let ordinaryCourseNum = '';



    window.$http.get("/sports/courseList?id=" + userId, function (res) {

        /* 从接口中筛选出最新课程和普通课程  latest为1为最新课程   latest为普通课程 */
        console.log(res)
        let data = res.data;

        newCourseNum = data.filter(function (v) {
            return v.latest === 1;
        })
        if (res.status === 0) {
            /* 渲染最新课程 */
            let courseImg = document.querySelector("#courseImg");
            let ABS = document.querySelector("#ABS");
            let feel = document.querySelector("#feel");

            courseImg.src = "http://139.9.177.51:8099" + newCourseNum[0].imgurl;
            ABS.textContent = newCourseNum[0].name;
            feel.textContent = newCourseNum[0].desc;


            /* 思想    用data自定义属性获得"courseId" 值 保存本地存储  就可以再b页面获取本地存储，然后获得对应的数据的到对应的课程*/

            let data = document.querySelector("#newCourse").dataset.cid = 3;
            /* 运用事件委派来实现点击进行存储 */
            document.querySelector("#newCourse").addEventListener("click", function (e) {

                if (e.target) {
                    sessionStorage.setItem("cid", newCourseNum[0].courseId)
                    location.href = 'introduction.html'
                }
            })

        }


        /* 普通课程 */
        ordinaryCourseNum = data.filter(function (v) {
            return v.latest === 0;
        })
        if (res.status === 0) {


            /* 声明一个变量来保存每次循环的值 */
            let hellWord = "";
            ordinaryCourseNum.forEach(function (value, index) {
                console.log(value, index)
                hellWord +=
                    `
                <div class="oldcourse"  data-cid = "${value.courseId}" >
                <img src="${"http://139.9.177.51:8099" + ordinaryCourseNum[index].imgurl}" alt="图片加载失败">
                <div class="hahahahah" data-cid = "${value.courseId}">
                    <h5>${ordinaryCourseNum[index].name}</h5>
                    <p>${ordinaryCourseNum[index].desc}</p>
                </div>
            </div>
                `

                /*                 <div class="oldcourse">
                                    <img src="../image/course-img01.jpg" alt="图片加载失败">
                                    <div>
                                        <h5>徒手胸肌</h5>
                                        <p>男生</p>
                                    </div>
                                </div> */

                document.querySelector("#helloWord").innerHTML = hellWord;


            })
            /* 思想    用data自定义属性获得"courseId" 值 保存本地存储  就可以再b页面获取本地存储，然后获得对应的数据的到对应的课程*/

            document.querySelector("#helloWord").addEventListener("click", function (e) {
                console.log(e.target)
                /* 这一步是重点  通过点击子元素来找到父元素的值  由于之前把courseId的值 放到了自定义属性  现在直接通过自定义属性的值拿到它的值  */

                /* 老师讲授的是通过子元素来拿到它的data属性 */

                /* 由于标题和内容是它的子级  所以通过类名的方式来寻找它的父亲 */
                if (e.target.parentNode.className == "oldcourse" || e.target.parentNode.className == "hahahahah") {
                    // 那么就拿到它的它的courseId值 并且传到本地存储 
                    let cid = e.target.parentNode.dataset["cid"];

                    console.log(cid)
                    sessionStorage.setItem("cid", cid)
                    location.href = 'introduction.html'
                }


            })

        }
    })
    /*普通课程渲染 封装成函数   循环渲染 */

    /* a-b  页面传参 */





});